<template>
  <div style="width: 100%; height: 100%">
    <AplidCharts
      :key="mapName"
      ref="mapEl"
      type="map"
      :timeLoad="false"
      :mapName="mapName"
      :option="option"
      style="width: 100%; height: 100%"
    ></AplidCharts>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import iconPointVR from "@/assets/icon-point-vr-1.png";
import iconMarkerOne from "@/assets/imgs/icon-point1.png";
import img from "./JSONsource/back.json";
import { color } from "echarts";

const mapEl = ref(null);
const mapName = ref('nanjing_outline,nanjing')
var mapPatternImg = new Image();
mapPatternImg.src = img.src;
const BaseOption = (
  data?: any,
  icon?: any,
  symbolSize?: any,
  mapAreaData?: any,
  geoMapName?:string,
  seriesMapName?:string
) => {
  const option = {
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        const data = params.data || {};
        const name = data.organizationName || data.soleValue;
        if (name) return `<p>${name}</p>`;
      },
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      show: false,
    },
    animation: true,
    grid: {
      top: 0,
    },
    geo: [
      {
        show: true,
        width: "100%",
        map: "nanjing_outline",
        zlevel: -1,
        aspectScale: 1,
        zoom: 1.2, // 缩放
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "none",
            },
          },
          emphasis: {
            show: false,
            textStyle: {
              color: "none",
            },
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        roam: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: "#fff",
          shadowColor: "#fff",
          color: {
            image: mapPatternImg,
            repeat: "repeat",
          },
        },
      },
      // 重影
      {
        type: "map",
        map: "nanjing_outline",
        zlevel: -2,
        aspectScale: 1,
        zoom: 1.2, // 缩放
        layoutCenter: ["50%", "51%"],
        layoutSize: "100%",
        roam: false,
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          shadowColor: "rgba(10, 79, 102, 0.6)",
          shadowOffsetY: 7, //控制产生第二个重影
          shadowBlur: 0,
          areaColor: "rgba(10, 79, 102, 0.2)",
          emphasis: {
            show: false,
          },
        },
        label: {
          emphasis: {
            show: false,
          },
        },
      },
    ],
    series: [
      {
        type: "map",
        map: "nanjing", // 自定义扩展图表类型
        zlevel: -1,
        aspectScale: 1,
        zoom: 1.2, // 缩放
        layoutCenter: ["50%", "50%"],
        // zoom: 1.2, // 缩放
        silent: false,
        label: {
          show: false,
          // color: "rgba(255,255,255,0.6)",
          padding: [14, 12],
          borderRadius: 5,
          lineHeight: 16,
          fontSize: 15,
          color: "#fff",
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          areaColor: "rgba(206, 213, 217, 0.1)",
          emphasis: {
            color: "#fff",
            borderWidth: 2,
            show: true,
            borderColor: "#fff",
            shadowColor: "#fff",
            shadowOffsetY: 5,
            shadowOffsetx: 5,
            shadowBlur: 10,
            areaColor: "rgba(206, 213, 217, 0.1)",
            label: {
              show: false,
              lineHeight: 16,
              fontSize: 15,
              color: "#fff",
            },
          },
        },
        layoutSize: "100%",
        data: mapAreaData,
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 20,
        data: data,
        showEffectOn: "emphasis",
        rippleEffect: {
          scale: 4,
          brushType: "stroke",
        },
        symbol: function (params) {
          const item = data.find((item: any) => {
            return item.value?.toString() === params.toString();
          });
          if (item.vr_src) {
            return `image://${iconPointVR}`;
          } else {
            return `image://${icon ? icon : iconMarkerOne}`;
          }
        },
        symbolSize: function (params) {
          const item = data.find((item: any) => {
            return item.value?.toString() === params.toString();
          });
          if (item.vr_src) {
            return [48, 48];
          } else {
            return symbolSize ? symbolSize : [10, 10];
          }
        },
        // symbolSize: symbolSize ? symbolSize : [45, 45],
        label: {
          formatter: "{b}",
          position: "right",
          show: false,
        },
      },
    ],
  };
  return option;
};
let data = [];
let option = BaseOption(data,'','','','nanjing_outline','nanjing');

onMounted(() => {
  nextTick(() => {
    mapEl.value?.myChart.on("click", (res) => {
      // option = BaseOption(data,'','','',res.name,res.name);
      // mapName.value = res.name
      console.log(res, "res-----dd");
    });
  });
});
</script>
<style scoped lang="scss"></style>
